
<template>
  <div>
    <SearchForm :search-list="searchList" :search-params="searchParams">
      <template #button>
        <el-popconfirm
            title="确认导出吗？"
        >
          <el-button type="danger" icon="el-icon-download" @click="onExport">导出</el-button>
        </el-popconfirm>
      </template>
    </SearchForm>
    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <el-button size="mini" :disabled="selectOptions.length === 0" @click="onCallBack">补发回调</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="onSearch"></el-button>
        </div>
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="420px"
              :data="tableData"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column fixed="left" type="selection"></el-table-column>
            <el-table-column min-width="220px" show-overflow-tooltip align="center" v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.type === 'select'">
                  <el-tag :type="item.tagType" v-if="item.isTag">{{ item.mapping[scope.row[item.prop]] }}</el-tag>
                  <span v-else>{{ item.mapping[scope.row[item.prop]] }}</span>
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
              background
              :current-page="pageNo"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              @size-change="changePageSize"
              @current-change="changePageNo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import crud from "@/mixins/crud";

export default {
  name: "index",
  mixins: [crud],
  data() {
    return {
      searchList: [
        {
          label: '订单时间',
          prop: 'orderTime',
          multiple: true,
          name: 'date',
          dateType: 'datetimerange',
        },
        {
          label: '处理时间',
          prop: 'handleTime',
          multiple: true,
          name: 'date',
          dateType: 'datetimerange',
        },
        {
          label: '商户订单号',
          prop: 'merchantOrderNo',
          name: 'input',
        },
        {
          label: '平台订单号',
          prop: 'platformOrderNo',
          name: 'input',
        },
        {
          label: "状态",
          prop: "status",
          name: "select",
          multiple: false,
          clearable: true,
          options: [
            {
              label: "PENDING",
              value: 0
            },
              // SUCCESS、FAILED、REFUND、PART_SUC
            {
              label: "SUCCESS",
              value: 1
            },
            {
              label: "FAILED",
              value: 2
            },
            {
              label: "REFUND",
              value: 3
            },
            {
              label: "PART_SUC",
              value: 4
            }
          ]
        },
          // 通知
        {
          label: "通知",
          prop: "notify",
          name: "select",
          multiple: false,
          clearable: true,
          options: [
            {
              label: "未通知",
              value: 0
            },
            {
              label: "通知成功",
              value: 1
            },
            {
              label: "通知失败",
              value: 2
            }
          ]
        }
      ],
      searchParams: {
        // 账单时间
        billTime: []
      },
      columns: [
          // 商户订单号、平台订单号、订单金额/预计到账/实际支付/手续费、银行（类型）、客户姓名、客户电话、客户邮箱
          // 申请时间、处理时间、状态、通知地址、回调、信息
        { prop: 'merchantOrderNo', label: '商户订单号' },
        { prop: 'platformOrderNo', label: '平台订单号' },
        { prop: 'orderAmount', label: '订单金额' },
        { prop: 'expectAmount', label: '预计到账' },
        { prop: 'actualPay', label: '实际支付' },
        { prop: 'fee', label: '手续费' },
        { prop: 'bankType', label: '银行（类型）' },
        { prop: 'customerName', label: '客户姓名' },
        { prop: 'customerPhone', label: '客户电话' },
        { prop: 'customerEmail', label: '客户邮箱' },
        { prop: 'applyTime', label: '申请时间' },
        { prop: 'handleTime', label: '处理时间' },
        { prop: 'status', label: '状态', isTag: true, type: 'select', tagType: 'success', mapping: { 0: 'PENDING', 1: 'SUCCESS', 2: 'FAILED', 3: 'REFUND', 4: 'PART_SUC' } },
        { prop: 'notify', label: '通知' },
        { prop: 'notifyUrl', label: '通知地址' },
        { prop: 'callback', label: '回调', isTag: true, type: 'select', tagType: 'success', mapping: { 0: '未通知', 1: '通知成功', 2: '通知失败' } },
        { prop: 'info', label: '信息' }
      ],
      tableData: [
          // 测试数据
        {
          merchantOrderNo: '202101010001',
          platformOrderNo: '202101010001',
          orderAmount: '100.00',
          expectAmount: '99.00',
          actualPay: '100.00',
          fee: '1.00',
          bankType: '中国银行',
          customerName: '张三',
          customerPhone: '13800138000',
          customerEmail: ''
        }
      ]
    }
  },
  methods: {
    onExport() {
      // 创建导出
    },
    onCallBack() {}
  }
}
</script>

<style scoped lang="scss">

</style>
